<template>
    <div class="page">
        <div class="page-top">
            <div class="content">
                <div class="name">视频文案灵感岛</div>
            </div>
        </div>
        <div class="tabs">
            <div class="tab" :class="{ active: activeTab == 0 }" @click="hdlChangeActiveTab(0)">文案背景</div>
            <div class="tab" :class="{ active: activeTab == 1 }" @click="hdlChangeActiveTab(1)">查看结果</div>
        </div>

        <template v-if="activeTab == 0">
            <div class="container">
                <div class="card">
                    <div class="sub-title-box">
                        <div class="sub-title">原始文案</div>
                    </div>
                    <textarea
                        class="origin-text"
                        placeholder="提前构思内容结构，选题对应素材作为原始文案，效果更佳"
                    ></textarea>
                </div>
                <div class="card">
                    <div class="sub-title-box">
                        <div class="sub-title">创作任务</div>
                    </div>
                    <div class="list task">
                        <div class="item active">财经脱口秀</div>
                        <div class="item">汽车测评</div>
                        <div class="item">旅游推荐</div>
                        <div class="item">房产导购</div>
                        <div class="item">城市产业</div>
                    </div>
                </div>
                <div class="card">
                    <div class="sub-title-box">
                        <div class="sub-title">评论风格</div>
                        <span class="seeDemo" @click="hdlSeeDemo">查看示例</span>
                    </div>
                    <div class="list task">
                        <div class="item active">财经脱口秀A</div>
                        <div class="item">财经脱口秀B</div>
                        <div class="item">财经脱口秀C</div>
                        <div class="item">财经脱口秀C</div>
                        <div class="item">财经脱口秀C</div>
                    </div>
                </div>
            </div>
            <div class="page-footer">
                <img class="history" src="@/assets/history.png" alt="" />
                <button class="active">生成文案</button>
            </div>
        </template>
        <template v-else>
            <div class="container">
                <div class="result-box">
                    <div class="loading-box">
                        <img src="@/assets/loading.svg" alt="" />
                        <span>结果生成中，请稍后...</span>
                    </div>
                    <div class="result"></div>
                </div>
            </div>
            <div class="update-box">
                <img src="@/assets/copy.png" alt="">
                <button>重新生成</button>
            </div>
        </template>

        <van-popup v-model:show="showDemo" round position="bottom" :style="{ height: '50%' }">
            <div class="demo-box">
                <div class="sub-title-box">
                    <div class="sub-title">财经脱口秀A</div>
                </div>
                <van-swipe class="swipe" indicator-color="#8F959E">
                    <van-swipe-item>
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse autem, quo dolorem, iste cumque
                        quibusdam excepturi minima ullam, mollitia assumenda ut! Aliquam eligendi harum odio veniam
                        expedita architecto labore quod. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse
                        autem, quo dolorem, iste cumque quibusdam excepturi minima ullam, mollitia assumenda ut! Aliquam
                        eligendi harum odio veniam expedita architecto labore quod. Lorem ipsum dolor, sit amet
                        consectetur adipisicing elit. Esse autem, quo dolorem, iste cumque quibusdam excepturi minima
                        ullam, mollitia assumenda ut! Aliquam eligendi harum odio veniam expedita architecto labore
                        quod.
                    </van-swipe-item>
                    <van-swipe-item>
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse autem, quo dolorem, iste cumque
                        quibusdam excepturi minima ullam, mollitia assumenda ut! Aliquam eligendi harum odio veniam
                        expedita architecto labore quod.
                    </van-swipe-item>
                    <van-swipe-item>
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse autem, quo dolorem, iste cumque
                        quibusdam excepturi minima ullam, mollitia assumenda ut! Aliquam eligendi harum odio veniam
                        expedita architecto labore quod.
                    </van-swipe-item>
                    <van-swipe-item>
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse autem, quo dolorem, iste cumque
                        quibusdam excepturi minima ullam, mollitia assumenda ut! Aliquam eligendi harum odio veniam
                        expedita architecto labore quod.
                    </van-swipe-item>
                </van-swipe>
                <button class="submit-demo">确定采用该风格</button>
            </div>
        </van-popup>
    </div>
</template>

<script setup lang="ts">
    const showDemo = ref(false);
    const activeTab = ref(0);
    const hdlSeeDemo = () => {
        showDemo.value = true;
    };
    const hdlChangeActiveTab = (key: number) => {
        activeTab.value = key;
    };
</script>

<style lang="scss" scoped src="./AiPlus.scss"></style>
